import * as React from 'react';
import * as classNames from 'classnames';
import * as BaseModal from "react-overlays/lib/Modal";
import * as _ from "lodash";
var styles = require('./modal.cssmodule.less');
export interface ModalProps {
  show: boolean;
  onHide: () => void;
  backdropStyles?: any;
}

class Modal extends React.Component<ModalProps, any>{
  render() {
    let { show, onHide, backdropStyles, children } = this.props;

    backdropStyles = _.assign(
      {
        backgroundColor: "#000",
        opacity: 0.5,
        position: "absolute",
        top: 0,
        bottom: 0,
        left: 0,
        right: 0,
        zIndex: -1,
      }, backdropStyles);
    return (
      <BaseModal
        aria-labelledby='modal-label'
        autoFocus={false}
        enforceFocus={false}
        style={{ position: "fixed", top: 0, bottom: 0, left: 0, right: 0, zIndex: 1040 }}
        backdropStyle={backdropStyles}
        show={show}
        onHide={onHide}>
        <div className="modal-table">
          <div className="modal-cell">
            <div className="modal-content">
              {
                children
              }
            </div>
          </div>
        </div>
      </BaseModal>
    );
  }
}
export default Modal;
